<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>InputEvent.inputType</title>
    <style>
      .main {
        width: 1000px;
        margin: auto;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0;
      }

      td,
      th {
        padding: 0;
      }

      .pure-table {
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #cbcbcb;
      }

      .pure-table caption {
        color: #000;
        font: italic 85%/1 arial, sans-serif;
        padding: 1em 0;
        text-align: center;
      }

      .pure-table td,
      .pure-table th {
        border-left: 1px solid #cbcbcb;
        border-width: 0 0 0 1px;
        font-size: inherit;
        margin: 0;
        overflow: visible;
        padding: 0.5em 1em;
      }

      .pure-table thead {
        background-color: #e0e0e0;
        color: #000;
        text-align: left;
        vertical-align: bottom;
      }

      .pure-table td {
        background-color: transparent;
      }

      .pure-table-bordered td {
        border-bottom: 1px solid #cbcbcb;
      }

      .pure-table-bordered tbody > tr:last-child > td {
        border-bottom-width: 0;
      }

      code {
        font-family: Menlo, Consolas, 'DejaVu Sans Mono', Monaco, monospace;
        font-size: 0.9em;
        hyphens: none;
        text-transform: none;
        text-align: left;
        text-align: start;
        font-variant: normal;
        orphans: 3;
        widows: 3;
        page-break-before: avoid;
        color: #c63501;
      }

      pre {
        border: 1px solid #cbcbcb;
        padding: 30px;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <table class="pure-table pure-table-bordered">
        <thead>
          <tr>
            <th style="width: 155px">Editing host</th>
            <th>inputType</th>
            <th>data</th>
            <th>dataTransfer</th>
            <th>getTargetRanges()</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Contenteditable</td>
            <td>
              <code>"insertText"</code>, <code>"insertCompositionText"</code>, <code>"formatSetBlockTextDirection"</code>,
              <code>"formatSetInlineTextDirection"</code>, <code>"formatBackColor"</code>, <code>"formatFontColor"</code>,
              <code>"formatFontName"</code>, <code>"insertLink"</code>
            </td>
            <td>Yes</td>
            <td>null</td>
            <td>Non-empty Array</td>
          </tr>
          <tr>
            <td>Contenteditable</td>
            <td>
              <code>"insertFromPaste"</code>, <code>"insertFromPasteAsQuotation"</code>, <code>"insertFromDrop"</code>,
              <code>"insertReplacementText"</code>,
              <code>"insertFromYank"</code>
            </td>
            <td>null</td>
            <td>Yes</td>
            <td>Non-empty Array</td>
          </tr>
          <tr>
            <td><code>&lt;textarea&gt;</code>, <br /><code>&lt;input type="text"&gt;</code></td>
            <td>
              <code>"insertText"</code>, <code>"insertCompositionText"</code>, <code>"insertFromPaste"</code>,
              <code>"insertFromPasteAsQuotation"</code>, <code>"insertFromDrop"</code>, <code>"insertReplacementText"</code>,
              <code>"insertFromYank"</code>, <code>"formatSetBlockTextDirection"</code>, <code>"formatSetInlineTextDirection"</code>,
              <code>"formatBackColor"</code>, <code>"formatFontColor"</code>, <code>"formatFontName"</code>, <code>"insertLink"</code>
            </td>
            <td>Yes</td>
            <td>null</td>
            <td>Empty Array</td>
          </tr>
          <tr>
            <td>All</td>
            <td><code>"historyUndo"</code>, <br /><code>"historyRedo"</code></td>
            <td>null</td>
            <td>null</td>
            <td>Empty Array</td>
          </tr>
          <tr>
            <td>Contenteditable</td>
            <td>All Remaining</td>
            <td>null</td>
            <td>null</td>
            <td>Non-empty Array</td>
          </tr>
          <tr>
            <td><code>&lt;textarea&gt;</code>, <br /><code>&lt;input type="text"&gt;</code></td>
            <td>All Remaining</td>
            <td>null</td>
            <td>null</td>
            <td>Empty Array</td>
          </tr>
        </tbody>
      </table>
      <h4>Attributes</h4>
      <p>The cancelability of the beforeinput event depends on the inputType.</p>
      <p>
        The inputType to be picked depends on the user's expression of intention , whether or not the editing takes place during an IME composition
        and the state of the selection.
      </p>
      <p>
        This specification defines the
        <dfn tabindex="0">inputType values</dfn> as the values in the inputType column of the following table.
      </p>
      <table class="pure-table pure-table-bordered">
        <thead>
          <tr>
            <th>inputType</th>
            <th>User's expression of intention</th>
            <th>Part of IME composition</th>
            <th>beforeinput cancelable</th>
            <th>State of selection</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <code>"insertText"</code>
            </td>
            <td>insert typed plain text</td>
            <td>No</td>
            <td>Undefined</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"insertReplacementText"</code>
            </td>
            <td>replace existing text by means of a spell checker, auto-correct or similar</td>
            <td>No</td>
            <td>Undefined</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"insertLineBreak"</code>
            </td>
            <td>insert a line break</td>
            <td>No</td>
            <td>Undefined</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"insertParagraph"</code>
            </td>
            <td>insert a paragraph break</td>
            <td>No</td>
            <td>Undefined</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"insertOrderedList"</code>
            </td>
            <td>insert a numbered list</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"insertUnorderedList"</code>
            </td>
            <td>insert a bulleted list</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"insertHorizontalRule"</code>
            </td>
            <td>insert a horizontal rule</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"insertFromYank"</code>
            </td>
            <td>replace the current selection with content stored in a kill buffer</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"insertFromDrop"</code>
            </td>
            <td>insert content into the DOM by means of drop</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"insertFromPaste"</code>
            </td>
            <td>paste</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"insertFromPasteAsQuotation"</code>
            </td>
            <td>paste content as a quotation</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"insertTranspose"</code>
            </td>
            <td>transpose the last two characters that were entered</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"insertCompositionText"</code>
            </td>
            <td>replace the current composition string</td>
            <td>Yes</td>
            <td>No</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"insertLink"</code>
            </td>
            <td>insert a link</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"deleteWordBackward"</code>
            </td>
            <td>delete a word directly before the caret position</td>
            <td>No</td>
            <td>Undefined</td>
            <td>Collapsed</td>
          </tr>
          <tr>
            <td>
              <code>"deleteWordForward"</code>
            </td>
            <td>delete a word directly after the caret position</td>
            <td>No</td>
            <td>Undefined</td>
            <td>Collapsed</td>
          </tr>
          <tr>
            <td>
              <code>"deleteSoftLineBackward"</code>
            </td>
            <td>delete from the caret to the nearest visual line break before the caret position</td>
            <td>No</td>
            <td>Undefined</td>
            <td>Collapsed</td>
          </tr>
          <tr>
            <td>
              <code>"deleteSoftLineForward"</code>
            </td>
            <td>delete from the caret to the nearest visual line break after the caret position</td>
            <td>No</td>
            <td>Undefined</td>
            <td>Collapsed</td>
          </tr>
          <tr>
            <td>
              <code>"deleteEntireSoftLine"</code>
            </td>
            <td>delete from to the nearest visual line break before the caret position to the nearest visual line break after the caret position</td>
            <td>No</td>
            <td>Undefined</td>
            <td>Collapsed</td>
          </tr>
          <tr>
            <td>
              <code>"deleteHardLineBackward"</code>
            </td>
            <td>
              delete from the caret to the nearest beginning of a block element or
              <code>br</code>
              element before the caret position
            </td>
            <td>No</td>
            <td>Undefined</td>
            <td>Collapsed</td>
          </tr>
          <tr>
            <td>
              <code>"deleteHardLineForward"</code>
            </td>
            <td>
              delete from the caret to the nearest end of a block element or
              <code>br</code>
              element after the caret position
            </td>
            <td>No</td>
            <td>Undefined</td>
            <td>Collapsed</td>
          </tr>
          <tr>
            <td>
              <code>"deleteByDrag"</code>
            </td>
            <td>remove content from the DOM by means of drag</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"deleteByCut"</code>
            </td>
            <td>remove the current selection as part of a cut</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"deleteContent"</code>
            </td>
            <td>delete the selection without specifying the direction of the deletion and this intention is not covered by another inputType</td>
            <td>No</td>
            <td>Undefined</td>
            <td>Non-collapsed</td>
          </tr>
          <tr>
            <td>
              <code>"deleteContentBackward"</code>
            </td>
            <td>
              delete the content directly before the caret position and this intention is not covered by another inputType or delete the selection
              with the selection collapsing to its start after the deletion
            </td>
            <td>No</td>
            <td>Undefined</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"deleteContentForward"</code>
            </td>
            <td>
              delete the content directly after the caret position and this intention is not covered by another inputType or delete the selection with
              the selection collapsing to its end after the deletion
            </td>
            <td>No</td>
            <td>Undefined</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"historyUndo"</code>
            </td>
            <td>undo the last editing action</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"historyRedo"</code>
            </td>
            <td>to redo the last undone editing action</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatBold"</code>
            </td>
            <td>initiate bold text</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatItalic"</code>
            </td>
            <td>initiate italic text</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatUnderline"</code>
            </td>
            <td>initiate underline text</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatStrikeThrough"</code>
            </td>
            <td>initiate stricken through text</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatSuperscript"</code>
            </td>
            <td>initiate superscript text</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatSubscript"</code>
            </td>
            <td>initiate subscript text</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatJustifyFull"</code>
            </td>
            <td>make the current selection fully justified</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatJustifyCenter"</code>
            </td>
            <td>center align the current selection</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatJustifyRight"</code>
            </td>
            <td>right align the current selection</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatJustifyLeft"</code>
            </td>
            <td>left align the current selection</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatIndent"</code>
            </td>
            <td>indent the current selection</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatOutdent"</code>
            </td>
            <td>outdent the current selection</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatRemove"</code>
            </td>
            <td>remove all formatting from the current selection</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatSetBlockTextDirection"</code>
            </td>
            <td>set the text block direction</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatSetInlineTextDirection"</code>
            </td>
            <td>set the text inline direction</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatBackColor"</code>
            </td>
            <td>change the background color</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatFontColor"</code>
            </td>
            <td>change the font color</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
          <tr>
            <td>
              <code>"formatFontName"</code>
            </td>
            <td>change the font-family</td>
            <td>No</td>
            <td>Yes</td>
            <td>Any</td>
          </tr>
        </tbody>
      </table>
      <pre><code>// 阻止默认行为，劫持所有的富文本输入
event.preventDefault()

// 根据 beforeInput 的 event.inputType
switch (type) {
  case 'deleteByComposition':
  case 'deleteByCut':
  case 'deleteByDrag': {
    Editor.deleteFragment(editor)
    break
  }

  case 'deleteContent':
  case 'deleteContentForward': {
    Editor.deleteForward(editor)
    break
  }

  case 'deleteContentBackward': {
    Editor.deleteBackward(editor)
    break
  }

  case 'deleteEntireSoftLine': {
    Editor.deleteBackward(editor, { unit: 'line' })
    Editor.deleteForward(editor, { unit: 'line' })
    break
  }

  case 'deleteHardLineBackward': {
    Editor.deleteBackward(editor, { unit: 'block' })
    break
  }

  case 'deleteSoftLineBackward': {
    Editor.deleteBackward(editor, { unit: 'line' })
    break
  }

  case 'deleteHardLineForward': {
    Editor.deleteForward(editor, { unit: 'block' })
    break
  }

  case 'deleteSoftLineForward': {
    Editor.deleteForward(editor, { unit: 'line' })
    break
  }

  case 'deleteWordBackward': {
    Editor.deleteBackward(editor, { unit: 'word' })
    break
  }

  case 'deleteWordForward': {
    Editor.deleteForward(editor, { unit: 'word' })
    break
  }

  case 'insertLineBreak':
  case 'insertParagraph': {
    Editor.insertBreak(editor)
    break
  }

  case 'insertFromComposition':
  case 'insertFromDrop':
  case 'insertFromPaste':
  case 'insertFromYank':
  case 'insertReplacementText':
  case 'insertText': {
    if (data instanceof DataTransfer) {
      // 这里处理非纯文本（如 html 图片文件等）的粘贴。对于纯文本的粘贴，使用 paste 事件
      DomEditor.insertData(editor, data)
    } else if (typeof data === 'string') {
      Editor.insertText(editor, data)
    }
    break
  }
}
</code></pre>
    </div>
  </body>
</html>
